<template>
  <div class="bi-box">
    <div>
      <v-title title="本月统计"></v-title>
    </div>
    <div class="bi-container">
      <div class="item" v-for="item in list" :key="item.title">
        <div>
          <span>{{item.title}}</span>
          <p>{{item.value}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'

  @Component({
    components: {
      vTitle
    }
  })
  export default class Bi extends Vue {
    @Prop({
      default: () => []
    }) list
  }
</script>

<style lang="less" scoped>
  .bi-box {
    display: flex;
    flex-direction: column;
  }

  .bi-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    padding-bottom: 20px;
    .item {
      width: 33.33%;
      &:nth-child(n+4) {
        margin-top: 20px;
      }
      > div {
        width: 90%;
        margin: 0 auto;
        height: 116px;
        background-image: linear-gradient(90deg,rgba(78,147,255,0.8) 0%,rgba(78,147,255,0.2) 100%);
        border-radius: 4px;
        text-align: center;

      }
      span {
        font-size: 14px;
        color: #666666;
        line-height: 64px;
      }
      p {
        font-size: 24px;
        color: #333333;
      }
    }
  }
</style>
